import { Slot, component$, type PropsOf } from '@builder.io/qwik';
import { cn } from '../cn';
import { cond, T, always } from 'rambda';

type ButtonProps = PropsOf<'button'> & {
  block?: boolean;
  sizing?: 'sm' | 'base' | 'lg' | undefined;
  varient?: 'primary' | 'default' | undefined;
};

const btnSizeClasses: (size?: 'sm' | 'base' | 'lg' | undefined) => string = cond([
  [(s) => s === 'sm', always('px-2 py-1 rounded    text-sm')],
  [(s) => s === 'lg', always('px-6 py-3 rounded-md text-lg')],
  [T, /*************/ always('px-4 py-2 rounded-md text-base')],
]);

const btnVarientClasses: (varient?: 'primary' | 'default' | undefined) => string = cond([
  [(s) => s === 'primary', always('bg-kq-500 border-kq-500 text-white  hover:bg-kq-600 hover:ring-kq-800 hover:border-kq-200 hover:ring-2 hover:outline-none')],
  [T, /******************/ always('bg-white  border-kq-300 text-kq-900 hover:bg-kq-50  hover:ring-kq-500 hover:border-kq-600 hover:ring-2 hover:outline-none')],
]);

const Button = component$<ButtonProps>((props) => {
  const { block, sizing, varient } = props;

  const classes = cn(
    'border shadow-sm',
    btnVarientClasses(varient),
    block && 'block w-full',
    btnSizeClasses(sizing),
    props.class
  );

  return (
    <button {...props} class={classes}>
      <Slot />
    </button>
  );
});

export default Button;
